﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<z.m.PasswordnProfile>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Register
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<div id="cen">
		<% using (Html.BeginForm()) { %>
		<table>
			<tr>
				<td>
					<fieldset>
						<legend>Account</legend>
						<table>
							<%: Html.AntiForgeryToken() %>
							<%--<tr><td><%: Html.LabelFor(m=>m.) %></td><td><%: Html.TextBoxFor(m=>m.) %></td></tr>--%>
							<tr>
								<td><%: Html.LabelFor(m=>m.UserName) %></td>
								<td><%: Html.TextBoxFor(m=>m.UserName) %></td>
								<td><%: Html.ValidationMessageFor(m=>m.UserName) %></td>
							</tr>
							<tr>
								<td><%: Html.LabelFor(m=>m.Password) %></td>
								<td><%: Html.PasswordFor(m=>m.Password) %></td>
								<td><%: Html.ValidationMessageFor(m=>m.Password) %></td>
							</tr>
							<tr>
								<td><%: Html.LabelFor(m=>m.ConfirmPassword) %></td>
								<td><%: Html.PasswordFor(m=>m.ConfirmPassword) %></td>
								<td><%: Html.ValidationMessageFor(m=>m.ConfirmPassword) %></td>
							</tr>
						</table>
					</fieldset>
				</td>
			</tr>
			<tr>
				<td>
					<fieldset>
						<legend>User Profile</legend>
						<table>
							<tr>
								<td><%: Html.LabelFor(m=>m.First_Name) %></td>
								<td><%: Html.TextBoxFor(m=>m.First_Name) %></td>
								<td><%: Html.ValidationMessageFor(m=>m.First_Name) %></td>
							</tr>
							<tr>
								<td><%: Html.LabelFor(m=>m.Last_Name) %></td>
								<td><%: Html.TextBoxFor(m=>m.Last_Name) %></td>
								<td><%: Html.ValidationMessageFor(m=>m.Last_Name) %></td>
							</tr>
							<tr>
								<td><%: Html.LabelFor(m=>m.Phone) %></td>
								<td><%: Html.TextBoxFor(m=>m.Phone) %></td>
								<td><%: Html.ValidationMessageFor(m=>m.Phone) %></td>
							</tr>
							<tr>
								<td><%: Html.LabelFor(m=>m.Address) %></td>
								<td>
									<input type="button" value="Show Map" onclick="showPopup('#map');" />
									<%: Html.TextBoxFor(m => m.Address, new { @class="collapse" })%>
									<%: Html.TextBoxFor(m=>m.MapLocation, new { @class="collapse" }) %></td>
								<td><%: Html.ValidationMessageFor(m=>m.Address) %></td>
							</tr>
						</table>
					</fieldset>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" value="Register" /></td>
			</tr>
		</table>

		<%} %>
		<div class="popup hidden" id="map">
			<div style="width: 475px; margin: 0 auto;">
				<input style="width: 400px; float: left;" type="search" results="10" placeholder="Address.." id="MapAddress" />
				<div style="margin: 0 5px; cursor: pointer; color: white; padding: 3px; background: rgb(153, 0, 173); float: left;"
					onclick="codeAddress();">
					Search
				</div>
			</div>
			<div class="close" onclick="closePopup(this.parentElement);"></div>
			<div id="map-canvas">
			</div>
		</div>
	</div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptsSection" runat="server">
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7LSLFdEapdvDJx3CZBlxTfPNKAbWEVjk&sensor=false"></script>
	<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/vi_ALL/mapfiles/api-3/12/5/%7Bcommon,util,geocoder,map%7D.js"></script>
	<script type="text/javascript">
		var map;
		var marker;
		var geocoder;
		function initialize() {
			setTimeout(function () { el("#map").className = "hidden" }, 1000);
			geocoder = new google.maps.Geocoder();
			var myLatlng = new google.maps.LatLng("19.0759837", "72.87765590000004");
			var mapOptions = {
				center: myLatlng,
				zoom: 8,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map(document.getElementById("map-canvas"),
				 mapOptions);
			marker = new google.maps.Marker({
				position: myLatlng,
				map: map,
				title: "I'm Here",
				draggable: true
			});
			marker.dragend = function () {
				el("#MapLocation").value = maker.getPosition();
			}
			google.maps.event.addListener(map, "click", function (event) {
				x = event.latLng;
				marker.setPosition(x);
				el("#MapLocation").value = x.jb + "," + x.kb
			});
			google.maps.event.addListener(marker, "dragend", function () {
				x = this.getPosition();
				el("#MapLocation").value = x.jb + "," + x.kb
			});
		}
		function codeAddress() {
			var address = el("#MapAddress").value;
			geocoder.geocode({ 'address': address }, function (results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					//var myLatlng = new google.maps.LatLng("19.0759837", "72.87765590000004");
					map.setCenter(results[0].geometry.location);
					marker.setPosition(results[0].geometry.location);
					el("#MapLocation").value = results[0].geometry.location.jb + "," + results[0].geometry.location.kb;
				} else {
					alert('Geocode was not successful for the following reason: ' + status);
				}
			});
		}
		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</asp:Content>
